
<template>
  <div class="box_bg">
    <div class="login-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="60px">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号" prop="account">
          <el-input
            type="text"
            placeholder="账号"
            v-model="form.account"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="密码"
            v-model="form.password"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submitForm('form')">登录</el-button>
    </div>
  </div>
</template>

<script>
import * as loginApi from "@/api/login";
export default {
  data() {
    return {
      form: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created(){
    console.log(this.$route.query.user);
    if (this.$route.query.user) {
    let str = this.$route.query.user;
let arr = str.split(",");
    console.log(arr);
    loginApi.login({
      account: arr[0],
      password: arr[1],
    }).then((res) => {
            if (res.data) {
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("userInfo", JSON.stringify(res.data));
              this.$message.success("登录成功");
              this.$router.push("/");
            }
          });
    }
  },
  methods: {
    submitForm(formaccount) {
      console.log(formaccount);
      
      this.$refs[formaccount].validate((valid) => {
        if (valid) {
          loginApi.login(this.form).then((res) => {
            if (res.data) {
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("userInfo", JSON.stringify(res.data));
              this.$message.success("登录成功");
              this.$router.push("/");
            }
          });
        } else {
          this.$message({
            message: "用户名或密码错误",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>

<style  scoped>
.login-box {
  width: 350px;
  margin: 120px auto;
  border: 1px solid #dcdfe6;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 30px #dcdfe6;
}

.login-title {
  text-align: center;
}

.el-button {
  width: 100%;
}
.box_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(../../src/image/bg1.jpg);
  background-size: 100% 100%;
  bg-repeat: no-repeat;
}
</style>